<template>
  <div>
    <b-container fluid style="background-color: rgba(255, 187, 18, 1);">
      <b-row align-h="center">
        <b-col lg="11">
          <div id="about-us-stat-wrapper">
            <b-container fluid>
              <b-row class="justify-content-between" no-gutters>
                <b-col sm="4" lg="2">
                  <AboutUsStat stat="2017" suffix="年" desc="公司成立时间" />
                </b-col>
                <b-col sm="4" lg="2">
                  <AboutUsStat stat="158" suffix="万" desc="沉淀用户" />
                </b-col>
                <b-col sm="4" lg="2">
                  <AboutUsStat stat="3240" suffix="万" desc="年营业额" />
                </b-col>
                <b-col sm="4" lg="2">
                  <AboutUsStat stat="180" suffix="+" desc="覆盖产品" />
                </b-col>
                <b-col sm="4" lg="2">
                  <AboutUsStat stat="110" suffix="+" desc="深度合作品牌" />
                </b-col>
              </b-row>
            </b-container>
            <!-- <AboutUsStat stat="2017" suffix="年" desc="公司成立时间" />
            <AboutUsStat stat="158" suffix="万" desc="沉淀用户" />
            <AboutUsStat stat="3240" suffix="万" desc="年营业额" />
            <AboutUsStat stat="180" suffix="+" desc="覆盖产品" />
            <AboutUsStat stat="110" suffix="+" desc="深度合作品牌" /> -->
          </div>
        </b-col>
      </b-row>
    </b-container>
    <b-container fluid>
      <b-row align-h="center">
        <b-col lg="11">
          <div id="about-us-desc-wrapper">
            <b-img src="/images/logo-square.png" width="300" height="300" />
            <div id="about-us-desc">
              <!-- <p class="about-us-desc-title">品牌故事</p>
              <p class="about-us-desc-subtitle">About US</p> -->
              <SectionTitle
                title="品牌故事"
                sub-title="About US"
                class="align-self-center"
                style="margin-bottom: 24px;"
              />
              <p class="about-us-desc-content">
                我们旨在赋能企业改变营销、销售和经营的方式。我们为商家、品牌及其他企业提供基本的互联网基础设施以及营销平台，让其可借助互联网的力量与用户和客户互动。
                我们的业务包括核心电商、云计算、数字媒体和娱乐以及创新项目和其他业务。
                我们并通过子公司菜鸟网络及所投资的关联公司口碑，参与物流和本地服务行业，
                同时与蚂蚁金融服务集团有战略合作，该金融服务集团主要通过中国领先的第三方网上支付平台支付宝运营。
              </p>
              <b-button
                squared
                variant="outline-secondary"
                size="sm"
                @click="onKnowMoreBtnClicked"
              >
                了解详情
              </b-button>
            </div>
          </div>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import SectionTitle from '@/components/m/SectionTitle';
import AboutUsStat from '@/components/AboutUsStat';

export default {
  components: {
    SectionTitle,
    AboutUsStat,
  },
  methods: {
    onKnowMoreBtnClicked() {
      this.$router.push('/aboutUs');
    },
  },
};
</script>

<style lang="scss" scoped>
#about-us-stat-wrapper {
  // min-height: 300px;
  padding-top: 48px;
  padding-bottom: 140px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  .row > div {
    margin-bottom: 30px;
  }
}
#about-us-desc-wrapper {
  min-height: 380px;
  padding: 36px 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  top: -120px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px rgba(153, 153, 153, 0.2);
  @include media-breakpoint-up(xl) {
    justify-content: space-between;
  }
}
#about-us-desc {
  flex-basis: 60%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: '微软雅黑';
  font-weight: 400;
  font-style: normal;
  text-align: left;
  line-height: 24px;
  letter-spacing: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
}
.about-us-desc-title {
  font-size: 18px;
  color: #666;
  margin: 0;
}
.about-us-desc-subtitle {
  font-size: 14px;
  color: #999;
}
.about-us-desc-content {
  font-family: 'PingFangSC-Regular', 'PingFang SC';
  font-size: 14px;
  color: #999;
  line-height: 28px;
}
#about-us-desc button {
  width: 90px;
  height: 35px;
  font-weight: 400 !important;
  font-style: normal;
  font-size: 12px;
  color: #999999;
  line-height: 24px;
  border-color: rgba(228, 228, 228, 1);
  align-self: flex-end;
}
</style>
